<template>
  <div class="setting-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <el-button type="primary" @click="add">+ 新增角色</el-button>

          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" type="index" width="50" />
            <!-- <el-table-column label="序号" width="180">
              <template slot-scope="scope">
                <i class="el-icon-time" />
                <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="角色名称" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="success">分配权限</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="edit(scope.row)"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :current-page="roleObj.page"
            :page-sizes="[2, 4, 6, 8, 10]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper,slot"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form
            ref="form"
            style="width: 40%"
            :model="formInfo"
            label-width="80px"
          >
            <el-form-item label="企业名称">
              <el-input v-model="formInfo.name" :disabled="true" />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="formInfo.companyAddress" disabled />
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input v-model="formInfo.companyPhone" disabled />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="formInfo.mailbox" disabled />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="formInfo.name" disabled />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 对话框 -->

    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleRole"
      width="30%"
      @close="closeHandle"
    >
      <setDialog
        v-if="dialogVisibleRole"
        ref="setDia"
        :is-edit="isEdit"
        :row="row"
        @success="success"
      />
    </el-dialog>
  </div>
</template>

<script>
import setDialog from './setDlaog.vue'
import { getRoles, getCompanyInfo } from '@/api/setting.js'
export default {
  name: '',
  components: {
    setDialog
  },
  data() {
    return {
      activeName: 'first',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      roleObj: {
        page: 1,
        pagesize: 2
      },
      total: 1,
      dialogVisibleRole: false,
      row: {},
      isEdit: false,
      formInfo: {
        name: ''
      }
    }
  },
  computed: {},
  created() {
    // 获取角色列表
    this.getRoleHandle()
    // 获取公司信息
    this.getInfo()
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row)
    },
    /* 获取公司角色列表 */
    async getRoleHandle() {
      /*
      步骤分析：
      1-封装api接口函数
      2-引入调用api函数
      3-获取数据===将数据展示到表单中
      */
      const {
        data: { rows, total }
      } = await getRoles(this.roleObj)
      console.log(`rows`, rows)
      this.tableData = rows
      this.total = total
    },
    /* 分页 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.roleObj.pagesize = val
      this.getRoleHandle()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.roleObj.page = val
      this.getRoleHandle()
    },
    /*
    作业：表格中的索引需按照顺序来实现，而不是每一页都是从1开始
    */
    add() {
      this.dialogVisibleRole = true

      this.isEdit = false // 3-1需要判断到底点击的是添加还是按钮  isEdit
    },
    // 添加角色成功后的回调
    success() {
      // 关闭对话框+刷新页面+清空表单数据
      this.dialogVisibleRole = false
      this.getRoleHandle()
      this.$refs.setDia.close() //   this.$refs.setDia获取子组件中的this
    },

    edit(row) {
      this.row = row
      console.log(row, 7777)

      this.dialogVisibleRole = true
      this.isEdit = true // 3-1需要判断到底点击的是添加还是按钮  isEdit
    },
    closeHandle() {
      // 关闭对话框就触发
      this.$refs.setDia.close()
    },

    async getInfo() {
      const res = await getCompanyInfo(
        this.$store.state.user.userInfo.companyId
      )
      console.log(`res`, res)
      this.formInfo = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.setting-container {
  padding: 30px;
  .el-card {
  }
}
</style>
